<template>
    <div id="out-share-page">
        <el-dialog
                :show-close="false"
                :visible.sync="outShareVisible"
                width="30%"
                @close="outShareClose"
                center
        >
            <el-dialog width="30%" title="外链分享" :visible.sync="innerVisible" append-to-body center>
                <el-form label-position="right" label-width="80px" :model="formLabelAlign" class="outLineShare">
                    <el-form-item label="链 接 :">
                        <el-input v-model="formLabelAlign.link" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="提取码 :" v-if="ruleForm.delivery">
                        <el-input v-model="formLabelAlign.password" :disabled="true"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="clientCopy" size="small">点击复制</el-button>
        </span>
            </el-dialog>
            <p style="font-weight:900">生成下载链接，然后复制链接发送给微信，QQ等好友</p>
            <el-form>
                <el-form-item label="提取码" prop="delivery">
                    <el-switch v-model="ruleForm.delivery"></el-switch>
                    <span style="color:#808080;font-size:12px;">开启后仅限拥有提取码者可查看，更加隐私安全</span>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="outShareClose" size="small">取 消</el-button>
        <el-button type="primary" @click="getLink" size="small">生成链接</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
  export default {
    name: "outSharePage",
    props: ["outShareVisible", "outShareFiles"],
    data() {
      return {
        activeName: 'first',
        ruleForm: {
          delivery: false
        },
        formLabelAlign: {
          link: "",
          password: ""
        },
        innerVisible: false,
        uuid:'',
      };
    },
    created() {
      this.innerVisible = false;
    },
    mounted() {
      console.log(this.outShareFiles);
      console.log(this.outShareFiles instanceof Array);
    },
    methods: {
      // 随机生成四位分享密码password
      getPassword() {
        let s = Math.random().toString(36);
        while (s.length < 6) {
          s = Math.random().toString(36);
        }
        let password = s.substring(s.length - 4);
        return password;
      },
      // 根据当前时间获取uuid
      getUuid() {
        let d = new Date().getTime();
        let uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
          /[xy]/g,
          function(c) {
            let r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
          }
        );
        return uuid;
      },
      getLink() {
         this.formLabelAlign.link = window.location.href.split("#")[0]+"#/Share?code=";
        // let a=window.location.href.substring(7);
        // let b='http://'+a.split("#")[0]
        // let oIp=this.$store.state.portArray[1];
        // if(oIp!=false){
        //   this.formLabelAlign.link = b+oIp+"#/Share?code=";
        // }else{
        //   let iIp=this.$store.state.portArray[0];
        //   if(iIp!=false){
        //     this.formLabelAlign.link = b+iIp+"#/Share?code=";
        //   }else{
        //     this.formLabelAlign.link = window.location.href.split("#")[0]+"#/Share?code=";
        //   }
        // }
        this.uuid = this.getUuid();
        this.formLabelAlign.password = '';
        this.formLabelAlign.password = "";
        if (this.ruleForm.delivery == true) {
          this.formLabelAlign.password = this.getPassword();
        }
        this.formLabelAlign.link += this.uuid;
        this.innerVisible = true;
      },
      outShareClose() {
        this.$emit("outShareVisibleBox", false);
      },
      // 点击复制
      clientCopy() {
        this.addOutShareFile(this.uuid,this.formLabelAlign.password,this.outShareFiles)
        const input = document.createElement("input");
        input.style.opacity="0";
        console.log(this.ruleForm.delivery);
        if (this.ruleForm.delivery == true) {
          input.setAttribute(
            "value",
            "来自企业数据链分享：" +
            this.formLabelAlign.link +
            "【提取码：" +
            this.formLabelAlign.password +
            "】"
          );
        } else {
          input.setAttribute(
            "value",
            "来自企业数据链分享：" + this.formLabelAlign.link
          );
        }
        document.body.appendChild(input);
        input.select();
        if (document.execCommand("copy")) {
          document.execCommand("copy");
          this.$message({
            message: "已成功复制到剪切板，快分享给小伙伴吧",
            type: "success"
          });
        }
        this.innerVisible = false;
        this.$emit("outShareVisibleBox", false);
      },
      // 传给后台uuid、提取码、文件id数组
      addOutShareFile(id,password,arr){
        console.log(arr);
        this.$http.post('/shareOut/insert',{
          url:id,
          extractionCode:password,
          fileIds:arr
        }).then(res=>{
          console.log(res);
        },err=>{
          this.$message({
            message: "网络出错!!",
            type: "error"
          });
        })
      }
    }
  };
</script>
<style lang="scss">
    .outLineShare{
        .el-form-item__label{
            width: 62px!important;
        }
        .el-form-item__content{
            margin-left:62px!important;
        }
    }
</style>
<style lang="scss" scoped>


</style>